import React from 'react';
import { connect } from 'react-redux'
import { del, complete } from './../actions'

class ListItem extends React.Component {

    constructor(props) {
        console.error(props)
        console.error(111111111111111111111)
        super(props);
        this.state = {
            text: props.text,
            id: props.id,
            completed: props.completed
        }
        // const del = props.del;
        this.del = props.del.bind(this);
        this.clickCheck = props.clickCheck.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        console.error("componentWillReceiveProps");
        this.state = {
            text: nextProps.text,
            id: nextProps.id,
            completed: nextProps.completed
        }
    }

    render() {
        console.error(this.state);
        return (
            <div>
                <input type="checkbox" readOnly onClick={ () => this.clickCheck(this.state.id) } />
                <li style={{textDecoration: this.state.completed ? 'line-through' : 'none'}} >{ this.state.text }<button onClick={ ()=> this.del(this.state.id) } style={{ 'paddingLeft': '10px' }}>x</button></li>
            </div>
        )
    }
}


// const mapStateToProps = () => {

// }

const mapDispatchToProps = (dispatch) => {
    return {
        del: (id) => {
            console.error("id:" + id);
            dispatch(del(id))
        },
        clickCheck: (id) => {
            console.error(id);
            dispatch(complete(id));
        }
    }
}

// const 

export default connect(null, mapDispatchToProps)(ListItem);